<template>
  <el-dialog
    v-model="visible"
    :title="isEdit ? '编辑检测任务' : '新建检测任务'"
    width="500px"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    class="task-dialog"
    @closed="handleClosed"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
      class="task-form"
      v-loading="loading"
    >
      <el-form-item label="任务名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入任务名称" />
      </el-form-item>

      <el-form-item label="目标IP" prop="ip">
        <el-input v-model="form.ip" placeholder="请输入目标IP地址" />
      </el-form-item>

      <el-form-item label="端口范围" prop="ports">
        <el-input v-model="form.ports" placeholder="例如: 端口范围80-8080" />
        <div class="form-tip">端口格式: 端口范围用横杠(1-1024)</div>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="submitForm" :loading="submitting"
          >确认</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
/**
 * 检测任务弹窗组件
 * @module TaskDialog
 * @description 用于创建或编辑漏洞检测任务的弹窗组件
 */
import { ref, computed, reactive, watch } from "vue";
import { ElMessage } from "element-plus";

// 接收参数
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  isEdit: {
    type: Boolean,
    default: false,
  },
  taskData: {
    type: Object,
    default: () => ({}),
  },
});

// 发出事件
const emit = defineEmits(["update:modelValue", "submit", "closed"]);

// 组件状态
const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit("update:modelValue", val),
});
const loading = ref(false);
const submitting = ref(false);
const formRef = ref(null);

// 表单数据
const form = reactive({});

// 表单校验规则
const rules = {
  name: [
    { required: true, message: "请输入任务名称", trigger: "blur" },
    { min: 2, max: 50, message: "长度应为2-50个字符", trigger: "blur" },
  ],
  ip: [
    { required: true, message: "请输入目标IP地址", trigger: "blur" },
    {
      pattern:
        /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
      message: "请输入正确的IP地址",
      trigger: "blur",
    },
  ],
  ports: [
    { required: true, message: "请输入端口范围", trigger: "blur" },
    {
      pattern: /^(\d+(-\d+)?)(,\d+(-\d+)?)*$/,
      message: "端口格式不正确，请使用逗号分隔或使用横杠表示范围",
      trigger: "blur",
    },
  ],
};

// 监听编辑数据变化
watch(
  () => props.taskData,
  (newVal) => {
    if (newVal && Object.keys(newVal).length > 0) {
      form.name = newVal.name || "";
      form.ip = newVal.ip || "";
      form.ports = newVal.ports || "";
    }
  },
  { immediate: true }
);

// 提交表单
const submitForm = async () => {
  if (!formRef.value) return;

  await formRef.value.validate(async (valid) => {
    if (!valid) {
      ElMessage.warning("请完善表单内容");
      return;
    }

    submitting.value = true;

    try {
      const formData = {
        ...form,
        id: props.isEdit ? props.taskData.id : undefined,
      };

      // 提交表单数据
      emit("submit", formData);

      // 关闭弹窗
      visible.value = false;
    } catch (error) {
      ElMessage.error("提交失败，请稍后重试");
    } finally {
      submitting.value = false;
    }
  });
};

// 关闭弹窗处理
const handleClosed = () => {
  // 重置表单
  if (formRef.value) {
    formRef.value.resetFields();
  }

  // 触发关闭事件
  emit("closed");
};
</script>

<style lang="scss" scoped>
.task-dialog {
  :deep(.el-dialog__body) {
    padding: 20px;
  }
}

.task-form {
  padding: 20px 20px 0px 20px;
}

.form-tip {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}
</style>
